<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.79.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        大量数据（我的电脑50W小卡顿）
        <button onclick="createLayer(2)">创建(唯一值渲染)</button>
        <button onclick="setRenderer2()">创建(值域渲染)</button>
        <button onclick="show(true)">显示</button>
        <button onclick="show(false)">隐藏</button>
        <button onclick="updateRenderer(true)">更新渲染器</button>
        <button onclick="updatePosition(false)">更新点位</button>
        <button onclick="getById()">根据id获得</button>
        <button onclick="removeById()">移除指定id</button>
        <button onclick="removeAll()">移除所有</button>
        <button onclick="flyTo()">飞到</button>
        <button onclick="flyToById()">飞到面</button>
        <button onclick="addEvent()">事件</button>
        <button onclick="removeEvent()">移除事件</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.79.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });



        function createLayer() {
            var source = [];
            const count = 100;//个数为   count * count 
            for (var i = 0; i < count; i++) {
                for (var j = 0; j < count; j++) {
                    const index = i * count + j
                    source.push({
                        geometry: {
                            x: 119 + i * 0.1,
                            y: 26 + j * 0.1,
                            z: 100
                        },
                        attributes: {
                            name: "属性啦" + index,
                            index: index
                        }
                    })
                }
            }
            const renderer = {
                type: "UniqueValueRenderer",
                field: "index",
                defaultSymbol: { type: "simple-fill", color: [1, 0, 0, 1], size: 10 },
                uniqueValueInfos: [
                    {
                        value: 1,
                        symbol: {
                            type: "simple-fill",
                            color: [1, 1, 0, 1],
                            size: 30
                        }
                    }, {
                        value: 2,
                        symbol: {
                            type: "simple-fill",
                            color: [1, 0, 1, 1],
                            size: 20
                        }
                    },
                    {
                        value: 99,
                        symbol: {
                            type: "simple-fill",
                            color: [0, 1, 1, 1],
                            size: 50
                        }
                    }
                ]
            };
            fl = new cpc.SimplePointLayer({
                name: "大量数据（我的电脑50W小卡顿）",
                source: source,
                renderer
            });
            fl.when((cesiumObj) => {
            })
            map.add(fl);
        }
        function setRenderer2() {
            const renderer = {
                type: "ClassBreaksRenderer",
                field: "index",
                defaultSymbol: { type: "simple-fill", color: [1, 0, 0, 1], size: 10 },
                classBreakInfos: [
                    {
                        minValue: 1,
                        maxValue: 5,
                        symbol: {
                            type: "simple-fill",
                            color: [1, 1, 0, 1],
                            size: 30
                        }
                    }, {
                        minValue: 10,
                        maxValue: 30,
                        symbol: {
                            type: "simple-fill",
                            color: [1, 0, 1, 1],
                            size: 20
                        }
                    },
                    {
                        minValue: 55,
                        maxValue: 60,
                        symbol: {
                            type: "simple-fill",
                            color: [0, 1, 1, 1],
                            size: 50
                        }
                    }
                ]
            };
            fl.setRenderer(renderer);
        }
        function show(show) {
            fl.show = show;
        }
        function updateRenderer() {
            const renderer = {
                type: "UniqueValueRenderer",
                field: "index",
                defaultSymbol: { type: "simple-fill", color: [1, 0, 0, 1], size: 10 },
                uniqueValueInfos: [
                    {
                        value: 1,
                        symbol: {
                            type: "simple-fill",
                            color: [1, 1, 0, 1],
                            size: 30
                        }
                    }, {
                        value: 50,
                        symbol: {
                            type: "simple-fill",
                            color: [1, 0, 1, 1],
                            size: 20
                        }
                    },
                    {
                        value: 80,
                        symbol: {
                            type: "simple-fill",
                            color: [0, 1, 1, 1],
                            size: 10
                        }
                    }
                ]
            };
            fl.setRenderer(renderer);
        }
        function updatePosition() {
            var source = [];
            for (var index = 0; index < 100; index++) {
                source.push({
                    geometry: {
                        x: 119,
                        y: 26 + index * 0.1,
                        z: 100
                    },
                    attributes: {
                        name: "属性啦",
                        index: index
                    }
                })
            }
            fl.setSource(source);
        }
        function getById() {
            console.log(fl.getByWhere("index", 5));
        }
        function removeById() {
            fl.removeByWhere("index", 1);
        }
        function removeAll() {
            fl.removeByMap()
        }
        function flyTo() {
            fl.flyTo(3, -30);
        }
        function flyToById() {
            fl.flyToByWhere("index", 20);
        }
        function addEvent() {
            fl.on("click", (e) => {
                console.log("最终结果", e);
            })
        }
        function removeEvent() {
            fl.off();
        }
    </script>
</body>

</html>